<template>
  <div class="app-container">
    <el-form class="form-inline" inline>
      <el-form-item label="用户昵称">
        <el-input v-model="searchInfo.nickname" clearable placeholder="请输入关键字"></el-input>
      </el-form-item>
      <el-form-item label="用户账号">
        <el-input v-model="searchInfo.mobile" clearable placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="系统类型">
        <el-select v-model="searchInfo.sysType">
          <el-option label="全部" value=""></el-option>
          <el-option label="IOS" value="IOS"></el-option>
          <el-option label="安卓" value="android"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="注册来源">
        <el-select v-model="searchInfo.sysType">
          <el-option label="全部" value=""></el-option>
          <el-option label="官方" value="offical"></el-option>
          <el-option label="小米" value="xiaomi"></el-option>
          <el-option label="华为" value="huawei"></el-option>
          <el-option label="OPPO" value="oppo"></el-option>
          <el-option label="应用宝" value="yingyongbao"></el-option>
          <el-option label="360" value="360"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户等级">
        <el-select v-model="searchInfo.vipLevel">
          <el-option label="全部" value=""></el-option>
          <el-option label="官方" value="offical"></el-option>
          <el-option label="会员" value="vip"></el-option>
          <el-option label="非会员" value="normal"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="content">
      <div class="_list">
        <el-table :data="dataList" @selection-change="handleSelectionChange" :height="$tools.tableHeight()" v-loading.body="listLoading" highlight-current-row style="width: 100%">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="用户id" prop="id"></el-table-column>
          <el-table-column label="用户信息" width="160">
            <template slot-scope="scope">
              <div class="user_info">
                <img :src="scope.row.avatar && scope.row.avatar.indexOf('http') > -1 ? scope.row.avatar : '/static/images/avatar_user.png'" class="thumbnail" />
                <div class="info">{{ scope.row.username }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="用户账号" prop="mobile" width="120"></el-table-column>

          <el-table-column label="系统类型">
            <template slot-scope="scope">
              {{ scope.row.sysType || '--' }}
            </template>
          </el-table-column>
          <el-table-column label="注册来源">
            <template slot-scope="scope">
              {{ (scope.row.registerChannel === 1 ? 'APP' : '分享') || '--' }}
            </template>
          </el-table-column>
          <el-table-column label="文本总量" prop="fileTotalNum" width="100" sortable></el-table-column>
          <el-table-column label="最后一次登录时间" width="200" sortable>
            <template slot-scope="scope">
              {{(scope.row.lastLoginDate | formatDate) || '--' }}
            </template>
          </el-table-column>
          <el-table-column label="注册时间" width="180" sortable>
            <template slot-scope="scope">
              {{ scope.row.regDate | formatDate }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pages">
        <div class="left">
          <el-tooltip class="item" effect="dark" content="批量删除" placement="top">
            <el-button size="small" type="danger" @click="arrDelete('2')">批量删除</el-button>
          </el-tooltip>
        </div>
        <div class="right" v-if="total > 0">
          <el-pagination background :total="total" :page-size="15" :current-page.sync="page" layout="total, prev, pager, next, jumper" @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import mixinsTable from '@/util/mixins.table';

export default {
  name: 'userList',
  mixins: [mixinsTable],
  data () {
    return {
      paymentsTotal: 0,
      currentPage: 1,
      searchInfo: {},
      tabIndex: '1',
      payments: [],
      userId: '',
      searchField: 'searchInfo',
      APISERVER: 'getUserList',
      DELETEAPI: 'deleteUser',
    };
  },
  filters: {
    payStatus (value) {
      const result = {
        NOT_PAYMENT: '未支付',
        PAY_SUCCESS: '支付成功',
        TRADING_HALT: '支付关闭',
        ING_PAYMENT: '支付中',
        FAILURE_PAYMENT: '支付失败',
        TIME_OUT_HALT: '支付超时',
      };
      return result[value];
    }
  },
  created () {
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.el-popover {
  padding: 6px;
}
.editArea {
  padding: 3px;
  cursor: pointer;
  &:hover {
    margin: -1px;
    border: 1px dashed #666;
  }
}
</style>
